<template>
    <section class="mobileFile">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="上传类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择上传类型">
                    <el-option
                        v-for="item in upLoadTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="图片上传" prop="filePath">
                <FileUpload ref="upload" :value="form.filePath" :isImg="true" :disabled="false" @getValue="form.filePath = $event"></FileUpload>
            </el-form-item>
            <el-button type="primary" @click="submit('form')" style="margin-left: 130px;margin-top: 30px">提交</el-button>
        </el-form>
    </section>
</template>

<script>
    import FileUpload from '@/components/UpLoad';
    export default {
        name: "MobileUpLoadFile",
        data(){
            return{
                upLoadTypes:[
                    {
                        value: 'identityCardAnnex',
                        label: '身份证材料'
                    },
                    {
                        value: 'educationAnnex',
                        label: '学历证明材料'
                    },
                    // {
                    //     value: 'professionalTitleAnnex',
                    //     label: '专技职称证材料'
                    // },
                    {
                        value: 'workTimeAnnex',
                        label: '村书记任职时长/村干部在村工作年限证明材料'
                    },
                    {
                        value: 'partyTimeAnnex',
                        label: '入党时间证明材料'
                    },
                ],
                form:{
                    type:'',
                    pathFile:'',
                    cadresId: '',
                },
                rules:{
                    type: [
                        { required: true, trigger: 'blur', message: '请选择上传类型!'},
                    ],
                    filePath: [
                        {required: true, validator: (rule, value, callback) => {
                                if (!this.form[rule.field]) {
                                    callback(new Error('请上传图片！'));
                                } else {
                                    callback();
                                    return true;
                                }
                            }, trigger: 'change'},
                    ],
                },
            }
        },
        components:{
            FileUpload,
        },
        methods:{
            submit(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.$http('POST',`identity/villageCadresAnnex/`,this.form,false).then(data=>{
                            this.$message({
                                type:'success',
                                message:'图片提交成功！'
                            });
                            this.form.filePath = '';
                            this.$refs.upload.deleteImg(0);
                        })
                    } else {
                        return false;
                    }
                });
            },
            getParmeter(variable){
                let query = window.location.href.split('?')[1];   // 这里query的结果是：   promotion_code=ZB06AKXFSR&sku=100
                let vars = query.split('&');                             // 这里vars的结果是：   ["promotion_code=ZB06AKXFSR", "sku=100"]
                for (let i = 0; i < vars.length; i++) {                 //然后循环
                    let pair = vars[i].split('=');                        //  循环第一次结果pair ["promotion_code", "ZB06AKXFSR"]  循环第二次结果pair ["sku", "100"]
                    if(pair[0] === variable){                           // 做判断 如果参数名和我们的实参一样
                        return pair[1];                                       // 就返回对应的值
                    }
                }

                return '';

            },
        },
        created() {
            this.form.cadresId = this.getParmeter("cadreId");
            this.token = this.getParmeter("token");
            sessionStorage.setItem("token", this.token)
        }
    }
</script>

<style scoped>
    .mobileFile{
        text-align: left;
        margin: 150px 20px;
        font-size: 14px;
    }

</style>
